<template>
  <div class="box-head">
    <div class="htitle">
      <img src="/imgs/nindex/图层 631.png"></img>
      <span>{{ tit }}</span>
    </div>
    <div class="menu">
      <el-menu class="index-btm-menu" :default-active="pgCurrent" mode="horizontal" active-text-color="#eee"
        text-color="#eee" background-color="#02072a80" unique-opened router :ellipsis="false">
        <el-menu-item v-for="item in menuItems" :key="item" :index="item.name" class="item btn">
          {{ item.meta.title }}
        </el-menu-item>
      </el-menu>
    </div>
    <div class="r-menu">
      <el-weather></el-weather>
      <!-- <div class="fullscreen"></div>
      <div class="close"></div> -->
    </div>
  </div>
  <div class="left"></div>
  <div class="right"></div>

  <div class="box-hnav">
    <!-- <el-menu class="index-btm-menu" :default-active="pgCurrent" mode="horizontal" active-text-color="#eee"
      text-color="#eee" background-color="#02072a80" unique-opened router :ellipsis="false">
      <el-menu-item v-for="item in menuItems" :key="item" :index="item.name" class="item btn">
        {{ item.meta.title }}
      </el-menu-item>
    </el-menu> -->
  </div>
</template>
<script setup>
import { computed, watch, ref, toRefs, onUnmounted, onMounted, nextTick, markRaw } from "vue";
import { useStore } from "vuex";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import elUser from "./el-user.vue";
import elLogoText from "./el-logo-text.vue";
import elWeather from "cmpt/weather.vue";
const route = useRoute();
const router = useRouter();
const store = useStore();
const {
  showAside,
} = toRefs(store.state);

const { pgShow, pgCurrent } = toRefs(store.state);
const { needLogin, logined } = toRefs(store.state.user);
const menuItems = route.matched[0].children.filter((t) => !t.hid);
const cDef = "#4d93ef", cAct = "#ffff00";
const tit = window.__projName;
const nodeText = markRaw(elLogoText), tmpComponents = ref([nodeText]);
var wh = -1;
const hItem2 = (item, t) => {
  if (pgCurrent.value != item.name) {
    router.push(item);
  }
  store.commit("hSetMenuItem2", t);
  clearTimeout(wh);
  wh = setTimeout(() => {
    store.commit("hSetMenuItem2", null);
  }, 100);
};

const hOnOutEv = (e) => {
  switch (e) {
    case "hCreateNewScene":
      console.log("hCreateNewScene");
      break;
    default:
      break;
  }
  console.log("hCreateNewScene");
};

// onBeforeRouteUpdate((to, from) => {
//   let n = to.name;
//   if (needLogin.value && !logined.value) {
//     router.push("login");
//   }
//   if (!n) {
//     router.push(menuItems[0]);
//   } else if (n != from.name) {
//     // store.commit("hTogglePg", true);
//   }
//   store.commit("hSetQuery", router.query);
//   store.commit("hSetPg", n);
// });
const hToHome = () => {
  router.push("jsc");
};

// const hRefPage = () => {
//   if (needLogin.value && !logined.value) {
//     router.push("login");
//   }
//   store.commit("hSetPg", router.currentRoute.value.name);
// };

//两侧宽度控制
var stl;
watch(showAside, s => {
  console.log("监听到：", s)
  if (!s) {
    if (!stl) {
      stl = document.createElement("style");
      document.head.appendChild(stl);
    }
    stl.innerText = `:root{
				--m-aside:0px !important;
			}`
  } else {
    if (stl) {
      stl.innerText = "";
    }
  }
})
onUnmounted(() => { });
// onMounted(() => nextTick(() => hRefPage()));
</script>

<style scoped="scoped" lang="scss">
.menu {
  margin-left: 200px;
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 10px;
  width: 100%;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .margin {
    width: 34%;
  }

  .item {
    // margin-bottom: 26px;

    margin-right: 15px;
    letter-spacing: 3px;
    pointer-events: all;
    -webkit-user-select: none;
    position: relative;
    border: 0 solid #e7e7d3 !important;
    border-radius: 0px;
    // margin: 0 !important;
    // height: 31px !important;
    height: 53px;
    width: 202px;
    background-color: transparent !important;
    background-image: url(/imgs/nindex/nabarNo.png);
    opacity: 0.5;
    /* 设置图像为半透明 */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-indent: 24px;
    padding-right: 40px;
    // text-shadow: 0 0 8px #000000;

    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #0D4FB6;
    font-size: 27px;
  }

  .item:nth-child(n+1) {
    margin-left: -26px !important;
  }

  .item.active,
  .item.is-active,
  .item:hover {
    color: #0D4FB6 !important;
    opacity: 1;
    /* 设置图像为半透明 */
    background-color: transparent !important;
    background-image: url(/imgs/nindex/nabarSelect.png);
    // color: #ffff00 !important;
  }

  .index-btm-menu {
    background: none;
    border: 0;
    // height: calc(100% - 6px);
    justify-content: flex-end;
    align-items: center;
  }

  .index-btm-menu.rt {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin-right: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    .item {
      transform: rotateX(180deg);

      >* {
        transform: rotateX(180deg);
      }

      .item-child {
        display: none;
        position: absolute;
        bottom: 36px;
        left: 0px;
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          width: 110px;
          background: radial-gradient(#46460030 40%, #dada00ee 90%, #dada00);
          line-height: 32px;
          text-indent: 0;
          padding: 0 14px;
          border-radius: 6px;
          text-align: center;
          color: #eee;
        }

        li:hover {
          color: inherit;
        }
      }
    }

    .item.btn:hover .item-child {
      display: block;
    }
  }
}

.nrt {
  height: 100%;
  display: flex;
  width: 400px;
  flex-direction: row;
  justify-content: flex-end;

  .user {
    height: 80%;
    min-width: 60px;
  }

  .i_return {
    width: 52px;
    height: 100%;
    background: url(/imgs/icon/i-return.png) #5d8fb2;
    background-size: 20px 16px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    pointer-events: all;
  }
}

.hasChild::after {
  content: "▼";
  font-size: 14px;
  transform: scaleY(0.5);
  display: inline-block;
  width: 10px;
  text-indent: 0;
}


.box-hnav {
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom: 0;
  width: 100%;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  background-image: url(/imgs/nindex/bottom.png);
  height: 62px;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .margin {
    width: 34%;
  }

  .item {
    margin-bottom: 26px;
    margin-right: 90px;
    letter-spacing: 3px;
    pointer-events: all;
    -webkit-user-select: none;
    position: relative;
    border: 0 solid #e7e7d3 !important;
    border-radius: 0px;
    // margin: 0 !important;
    // height: 31px !important;
    height: 100px;
    width: 100px;
    font-size: 18px;
    background-color: transparent !important;
    background-image: url(/imgs/hf/nabarNo.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-indent: 24px;
    padding-right: 40px;
    text-shadow: 0 0 8px #000000;
  }

  .item:nth-child(n+1) {
    margin-left: -26px !important;
  }

  .item.active,
  .item.is-active,
  .item:hover {
    background-color: transparent !important;
    background-image: url(/imgs/hf/nabarSelect.png);
    // color: #ffff00 !important;
  }

  .index-btm-menu {
    background: none;
    border: 0;
    // height: calc(100% - 6px);
    justify-content: flex-end;
    align-items: center;
  }

  .index-btm-menu.rt {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    margin-right: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    .item {
      transform: rotateX(180deg);

      >* {
        transform: rotateX(180deg);
      }

      .item-child {
        display: none;
        position: absolute;
        bottom: 36px;
        left: 0px;
        list-style: none;
        margin: 0;
        padding: 0;

        li {
          width: 110px;
          background: radial-gradient(#46460030 40%, #dada00ee 90%, #dada00);
          line-height: 32px;
          text-indent: 0;
          padding: 0 14px;
          border-radius: 6px;
          text-align: center;
          color: #eee;
        }

        li:hover {
          color: inherit;
        }
      }
    }

    .item.btn:hover .item-child {
      display: block;
    }
  }
}

.left {
  width: 18px;
  height: 980px;
  position: fixed;
  z-index: 1000;
  align-items: center;
  justify-content: flex-start;
  background: url(/imgs/nindex/left.png) no-repeat;
  background-size: 100% 100%;
}

.right {
  width: 18px;
  height: 980px;
  position: fixed;
  right: 0;
  z-index: 1000;
  align-items: center;
  justify-content: flex-start;
  background: url(/imgs/nindex/right.png) no-repeat right center;
  background-size: 100% 100%;
}

.box-head {
  // margin-left: 48px;
  height: 73px;
  width: 100%;
  display: flex;
  z-index: 1000;
  position: relative;
  align-items: center;
  justify-content: center;
  background: url(/imgs/nindex/head.png) no-repeat;
  background-size: 100% 100%;

  .htitle {
    /* margin-left: 608px; */
    //  height: var(--m-head);
    //    height: 64px;
    // width: 39%;
    // position: absolute;
    // justify-content: center;
    // background: url(/imgs/hf/top2.png);
    // background-size: 100% 100%;
    // background-position: center center;
    margin-left: 30px;
    width: 800px;
    height: 60px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 38px;
    color: #F6F8F9;
    line-height: 28px;
    // text-shadow: 0px 0px 8px rgba(52,73,83,0.82);
    background: linear-gradient(180deg, #FFFFFF 0%, #C4D5EA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    img {
      width: 40px;
      margin-right: 10px;
      height: 40px;
    }
  }

}

.r-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-right: 20px;

  .fullscreen {
    width: 39px;
    height: 38px;
    background: url(/imgs/jf/fullScreen.png);
    background-size: 100% 100%;
  }

  .close {
    width: 39px;
    height: 38px;
    background: url(/imgs/jf/关闭按钮@2x.png);
    background-size: 100% 100%;
  }
}
</style>